<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <base href="http://127.0.0.1/ebpm/">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<style type="text/css">
		*{
			margin:0;padding:0;
			font-family: Calibri;
		}
		#workFlowId {
			border: none;
			font-size: 12px;
		}
		table {
			background:#c3c3c3;
		}
		td{
			background:#efefef;
		}
	</style>
	
	<link rel="stylesheet" type="text/css" href="wf/wf.css">
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="wf/UserTask.js"></script>
	<script type="text/javascript" src="wf/UserTaskList.js"></script>
	<script type="text/javascript" src="wf/Line.js"></script>
	
	<script type="text/javascript">
	
		var wf;
		
		// 当前执行的任务名
		var currentMissionName = "[[${currentMissionName}]]";
		
		function jsonData() {
			
			if(wf) {
				wf.toggle();
			} else {
				var h = parseInt($("#showId").innerHeight()) + parseInt( $("#showId").css("marginTop")) + 30;
				$.ajax({
				    url: 'wf/jsonData?missionId=[[${missionId}]]&rootExecutionId=[[${rootExecutionId}]]',
				    success: function(data) {
				    	console.log(data);
				    	wf = new WorkFlow(data.jsonData, h, currentMissionName);
				    	wf.show();
				    	wf.historyProcess(data.hisTasks);
				    },
				    error: function(responseStr) {
				        console.log(responseStr.responseText);
				    }
				});
				
			}
			
		}
		
		$(function() {
			
			var expressSelect = document.getElementById("express");
			if(expressSelect) {
				$.ajax({
				    url: 'wf/queryTransfers?missionId=[[${missionId}]]',
				    success: function(data) {
						expressSelect.options.length = 0;
						for(var i=0; i<data.length; i++) {
							expressSelect.options.add(new Option(data[i].desc, data[i].express));
						}
				    }
				});
			}
			
			jsonData();
			
		})
	</script>
	
  </head>
  
  <body>
  
  	 <div style="position: fixed;top: 0;background: #c4c4c4 ;width:100%;height: 60px;text-align: center;padding-top:20px;">
    	<div>
    			<form th:if="${session.LOGIN_USER} == null" action="wf/login">
    				<input type="text" name="username" >
    				<input type="submit" value="登录" style="width:80px;margin-left:20px;" >
		    		<input type="button" value="流程部署" onclick="window.location.href='wf/deploy'" style="width:100px;margin-left:20px;" >
    			</form>
			<div th:if="${session.LOGIN_USER} != null">
    			[[${session.LOGIN_USER }]]
    			<input type="button" value="退出登录" onclick="window.location.href='wf/loginOut'" style="width:100px;margin-left:20px;" >
	    		<input type="button" value="流程部署" onclick="window.location.href='wf/deploy'" style="width:100px;margin-left:20px;" >
			</div>
    	</div>
    	
  	 </div>
  
    <div id="showId" style="margin-top:100px;">
    	
    	<div style="text-align: center;margin-left:10%;width:80%;">
			<table style="width:100%;text-align: center;margin-top:10px;" >
				<tr>
                    <td colspan="6" align="center"><h1>流程执行历史</h1></td>
                </tr>
				<tr style="font-weight: bold;font-size:20px;">
					<td>流程信息</td>
					<td>执行人</td>
					<td>执行结果</td>
					<td>完成时间</td>
					<td>状态</td>
					<td>备注</td>
				</tr>
					<tr th:each="task:${hisTasks}" style="height:30px; ">
						<td>
							[[${task.type }]]
							[[${task.desc }]]
							<span th:if="${taskId} == ${task.id}" style="color:red;">(当前任务)</span>
						</td>
						<td>[[${task.assignee }]]</td>
						<td>[[${task.transferDesc }]]</td>
						<td th:text="${#dates.format(task.dueTime, 'yyyy-MM-dd HH:mm:ss')}" ></td>
						<td>
							<span th:if="${task.status} == 1" style="font-size:16px;color:red;font-weight: bold;">执行中</span>
							<span th:if="${task.status} == 2" style="font-size:16px;color:green;font-weight: bold;">完成</span>
						</td>
						<td>[[${task.remark }]]</td>
					</tr>
			</table>
			
		</div>
		
		<div style="margin-left:10%;margin-top:10px;padding-top:10px;width:80%;">
			<form action="wf/executeNext">
				<div th:if="${taskId} != null">
					<input type="hidden" name="taskId" th:value="${taskId }" >
					任务Id：　[[${taskId }]]
					<textarea name="remark" rows="3" style="width:100%;margin-top:10px;margin-bottom:20px;"></textarea>
					<select id="express" name="express" style="width:180px;" >
						<option value="" >加载中</option>
					</select>
					<input type="submit" value="执行任务" style="width:100px;margin-left:20px;" >
				</div>
				<input type="button" value="查看流程图" onclick="jsonData()" style="width:100px;margin-left:20px;" >
				<input type="button" value="播放" onclick="wf.startHistoryProcess()" style="width:100px;margin-left:20px;" >
				<input type="button" value="停止" onclick="wf.stopHistoryProcess()" style="width:100px;margin-left:20px;" >
				<input type="button" value="上一步" onclick="wf.prevProcess()" style="width:100px;margin-left:20px;" >
				<input type="button" value="下一步" onclick="wf.nexProcess()" style="width:100px;margin-left:20px;" >
			</form>
		</div>
		
    </div>
    
  </body>
</html>
